<template>
  <div class="page-wrap">
    <search-wrap
      :gridCol="{ span: 6 }"
      :formConfig="formConfig"
      @search="search"
    >
      <template v-slot:username="{ data }">
        <a-input v-model="data.username"></a-input>
      </template>
      <template v-slot:password="{ data }">
        <a-input v-model="data.password"></a-input>
      </template>
      <template v-slot:gender="{ data }">
        <a-input v-model="data.gender"></a-input>
      </template>
      <template v-slot:username1="{ data }">
        <a-input v-model="data.username1"></a-input>
      </template>
      <template v-slot:password1="{ data }">
        <a-input v-model="data.password1"></a-input>
      </template>
      <template v-slot:gender1="{ data }">
        <a-input v-model="data.gender1"></a-input>
      </template>
    </search-wrap>
    <basic-table
    >
      <template v-slot:default="{ maxY }">
        <div style="margin-bottom: 10px">
            <div style="margin-bottom:10px;">
              <a-button type="primary" @click="addHandler">
                新增
              </a-button>
            </div>
            <template v-if="hasSelected">
              <a-alert type="info"  show-icon>
                <template slot="message">
                  已选择 <span class="ant-btn-link">
                    {{selectedRowKeys.length}}
                  </span> 项  
                  <span style="margin-left:10px;color:#ff4d4f;cursor: pointer;" class="ant-btn-link" @click="delSelectData">
                    删除选中
                  </span>
                </template>
              </a-alert>
              <!-- {{ `Selected ${selectedRowKeys.length} items` }} -->
            </template>
          
        </div>
        <a-table
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :loading="loading"
          :columns="columns"
          :data-source="data"
          :pagination="paging"
          :scroll="{ y: maxY }"
          @change="tableChange"
        >
          <span slot="tags" slot-scope="tags">
            <a-tag
              v-for="tag in tags"
              :key="tag"
              :color="
                tag === 'loser'
                  ? 'volcano'
                  : tag.length > 5
                  ? 'geekblue'
                  : 'green'
              "
            >
              {{ tag.toUpperCase() }}
            </a-tag>
          </span>
          <template slot="opt" slot-scope="text,record">
            <a-button-group>
              <!-- <a-button type="link" icon="delete" @click="delHandler(record.id)">删除</a-button> -->
              <a-button type="link" icon="edit" @click="editHandler(record)">编辑</a-button>
              <a-button type="link" icon="snippets" @click="editHandler(record)">详情</a-button>
              <!-- <a-button type="link" @click="closeAndNext('/home/12')">关闭当前并跳转到下一个</a-button> -->
            </a-button-group>
          </template>
        </a-table>
         <a-drawer
            :title="title"
            placement="right"
            :closable="true"
            :visible="visible"
            @close="onClose"
            width="600"
          >
          <Edit @close="onClose" :id="id" v-if="id" />
          <Add  v-else @close="onClose" />
         </a-drawer>
      </template>
    </basic-table>
  </div>
</template>
<script>
import ListMixin from "@/mixins/basic/list";
import Add from './add.vue'
import Edit from './edit.vue'
const columns = [
  {
    title: "名称",
    dataIndex: "name",
    key: "name"
  },
  {
    title: "描述",
    dataIndex: "description",
    key: "age",
  },
  {
    title: "操作",
    key: "opt",
    dataIndex: "opt",
    width:180,
    scopedSlots: { customRender: "opt" },
  },
];
export default {
  data() {
    return {
      params:{
        departmentId:""
      },
      columns,
      formConfig: [
        {
          label: "名称",
          name: "name",
        },
        {
          label: "描述",
          name: "description",
        }
      ],

    };
  },
  components:{
    Add,
    Edit
  },
  mixins: [ListMixin],
};
</script>
